const { defineConfig } = require("@vue/cli-service");
const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');
const mock = require('./mock/index')

// 引入path
const path = require("path")
// icon配置的依赖函数
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,

  chainWebpack(config) {
    // chainWebpack 函数   config 就是我们  webpack.config.js 中暴露的对象
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      //  exclude  除了   我们src 目录中 icons 中的 svg图片
      .end()

    //  防止被默认打包进了项目

    //  用了 这个svg 我们就打包这个svg
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  },

  devServer: {
    proxy: {
      '/api': {
        target: 'http://dreame.jinghuanqiu.com',
        ws: false,
        changeOrigin: true,
      },

    },
    // 我们自己服务器的中间件 用来提前模拟后端的请求
    onBeforeSetupMiddleware: mock
  },


  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
});
